<template>
  <view class="service-page">
    <!-- 订单信息卡片 -->
    <view class="card order-card">
      <view class="card-header">
        <text class="card-title">订单信息</text>
        <view class="status-badge" :class="statusClass">
          {{ getStatusText(order.orderStatus) }}
        </view>
      </view>
      
      <view class="info-row">
        <text class="label">订单号</text>
        <text class="value">{{ order.orderNo }}</text>
      </view>
      <view class="info-row">
        <text class="label">服务日期</text>
        <text class="value">{{ order.serviceDate }}</text>
      </view>
      <view class="info-row">
        <text class="label">服务时间</text>
        <text class="value">{{ order.startTime }} - {{ order.endTime }}</text>
      </view>
      <view class="info-row">
        <text class="label">用户姓名</text>
        <text class="value">{{ order.userName || '-' }}</text>
      </view>
      <view class="info-row">
        <text class="label">用户电话</text>
        <text class="value">{{ order.userPhone || '-' }}</text>
      </view>
      <view class="info-row">
        <text class="label">服务金额</text>
        <text class="value price">¥{{ order.amount }}</text>
      </view>
    </view>

    <!-- 服务操作按钮 -->
    <view class="action-card">
      <!-- 已确认状态：显示开始服务按钮 -->
      <button 
        v-if="order.orderStatus === 'CONFIRMED'" 
        class="action-btn start-btn"
        @click="handleStartService">
        <text class="iconfont icon-start"></text>
        开始服务
      </button>

      <!-- 进行中状态：显示上传照片和结束服务按钮 -->
      <template v-if="order.orderStatus === 'IN_PROGRESS'">
        <button class="action-btn upload-btn" @click="handleUploadPhoto">
          <text class="iconfont icon-camera"></text>
          上传照片
        </button>
        <button class="action-btn end-btn" @click="handleEndService">
          <text class="iconfont icon-check"></text>
          结束服务
        </button>
      </template>

      <!-- 已完成状态：显示查看记录按钮 -->
      <button 
        v-if="order.orderStatus === 'COMPLETED'" 
        class="action-btn view-btn"
        @click="viewRecords">
        <text class="iconfont icon-list"></text>
        查看服务记录
      </button>
    </view>

    <!-- 服务提示 -->
    <view class="tip-card" v-if="order.orderStatus === 'IN_PROGRESS'">
      <text class="tip-icon">💡</text>
      <text class="tip-text">服务过程中可以随时上传照片记录精彩瞬间</text>
    </view>
  </view>
</template>

<script>
import { getOrder } from '@/api/order'
import { startService, endService } from '@/api/service'

export default {
  data() {
    return {
      orderId: '',
      order: {}
    }
  },
  
  computed: {
    // 状态样式类
    statusClass() {
      const classMap = {
        'PENDING': 'status-pending',
        'CONFIRMED': 'status-confirmed',
        'IN_PROGRESS': 'status-progress',
        'COMPLETED': 'status-completed',
        'CANCELLED': 'status-cancelled'
      }
      return classMap[this.order.orderStatus] || ''
    }
  },
  
  onLoad(options) {
    this.orderId = options.id
    this.loadOrderDetail()
  },
  
  // 页面显示时刷新数据
  onShow() {
    if (this.orderId) {
      this.loadOrderDetail()
    }
  },
  
  methods: {
    // 加载订单详情
    async loadOrderDetail() {
      try {
        uni.showLoading({ title: '加载中...' })
        const res = await getOrder(this.orderId)
        this.order = res.data || res
      } catch (error) {
        uni.showToast({ title: error.msg || '加载失败', icon: 'none' })
      } finally {
        uni.hideLoading()
      }
    },
    
    // 开始服务
    handleStartService() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['camera', 'album'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0]
          this.confirmStartService(tempFilePath)
        }
      })
    },
    
    // 确认开始服务
    confirmStartService(photoPath) {
      uni.showModal({
        title: '确认开始服务',
        content: '确认开始为用户提供服务吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              uni.showLoading({ title: '处理中...' })
              
              await startService({
                orderId: this.orderId,
                photo: photoPath,
                description: '开始服务'
              })
              
              uni.showToast({ title: '服务已开始', icon: 'success' })
              
              // 刷新订单状态
              setTimeout(() => {
                this.loadOrderDetail()
              }, 1500)
              
            } catch (error) {
              uni.showToast({ 
                title: error.msg || '操作失败', 
                icon: 'none' 
              })
            } finally {
              uni.hideLoading()
            }
          }
        }
      })
    },
    
    // 上传照片
    handleUploadPhoto() {
      uni.navigateTo({
        url: `/pages/climber/upload-photo?orderId=${this.orderId}`
      })
    },
    
    // 结束服务
    handleEndService() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['camera', 'album'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0]
          this.confirmEndService(tempFilePath)
        }
      })
    },
    
    // 确认结束服务
    confirmEndService(photoPath) {
      uni.showModal({
        title: '确认结束服务',
        content: '确认已完成本次服务吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              uni.showLoading({ title: '处理中...' })
              
              await endService({
                orderId: this.orderId,
                photo: photoPath,
                description: '服务结束'
              })
              
              uni.showToast({ title: '服务已完成', icon: 'success' })
              
              // 刷新订单状态
              setTimeout(() => {
                this.loadOrderDetail()
              }, 1500)
              
            } catch (error) {
              uni.showToast({ 
                title: error.msg || '操作失败', 
                icon: 'none' 
              })
            } finally {
              uni.hideLoading()
            }
          }
        }
      })
    },
    
    // 查看服务记录
    viewRecords() {
      uni.navigateTo({
        url: `/pages/order/service-records?orderId=${this.orderId}`
      })
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        'PENDING': '待接单',
        'CONFIRMED': '已确认',
        'IN_PROGRESS': '进行中',
        'COMPLETED': '已完成',
        'CANCELLED': '已取消'
      }
      return statusMap[status] || status
    }
  }
}
</script>

<style scoped>
.service-page {
  min-height: 100vh;
  background: #f5f7fa;
  padding: 20rpx;
}

.card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.card-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.status-badge {
  padding: 8rpx 20rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  color: #fff;
}

.status-pending { background: #909399; }
.status-confirmed { background: #409EFF; }
.status-progress { background: #67C23A; }
.status-completed { background: #909399; }
.status-cancelled { background: #F56C6C; }

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.info-row:last-child {
  border-bottom: none;
}

.label {
  font-size: 28rpx;
  color: #909399;
}

.value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.price {
  color: #f56c6c;
  font-size: 32rpx;
  font-weight: bold;
}

.action-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.action-btn {
  width: 100%;
  height: 88rpx;
  border-radius: 44rpx;
  font-size: 32rpx;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
}

.action-btn:last-child {
  margin-bottom: 0;
}

.start-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.upload-btn {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.end-btn {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.view-btn {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.iconfont {
  margin-right: 10rpx;
  font-size: 36rpx;
}

.tip-card {
  background: #fff3cd;
  border-radius: 12rpx;
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
}

.tip-icon {
  font-size: 36rpx;
  margin-right: 15rpx;
}

.tip-text {
  font-size: 26rpx;
  color: #856404;
  flex: 1;
}
</style>

